<template>
  <div class="custom-tab-page">
    <div class="search-div">
      <el-form inline>
        <el-form-item>
          <el-input
            v-model="searchForm.order_no"
            placeholder="合同编号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="searchForm.order_name"
            placeholder="合同名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="searchForm.customer_name"
            placeholder="客户名称"
          ></el-input>
        </el-form-item>
        <el-form-item prop="owner_by">
          <el-tree-select
            default-expand-all
            node-key="id"
            filterable
            v-model="searchForm.owner_by"
            :data="userOptions"
            check-strictly
            :render-after-expand="false"
            :props="{
              label: 'name',
            }"
            style="width: 100%"
            placeholder="选择销售"
            clearable
          >
          </el-tree-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="searchForm.start_date"
            type="date"
            placeholder="开始日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="searchForm.end_date"
            type="date"
            placeholder="结束日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchFun">查询</el-button>
          <el-button @click="resetFun">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tab5-title">
      <div class="left">总额：¥{{ allMoney }}</div>
      <!-- <el-button
        v-if="showItem"
        class="right"
        type="primary"
        @click="addFun"
        size="small"
      >
        + 添加
      </el-button> -->
    </div>
    <el-table
      :data="tableData"
      :height="store.tableHeight - 100"
      border
      style="width: 100%; margin-top: 15px"
    >
      <el-table-column prop="id" label="序号" width="55" />
      <el-table-column prop="code" label="回款编号" />
      <el-table-column prop="order_no" label="合同号" />
      <el-table-column prop="order_name" label="合同名称" />
      <el-table-column prop="customer_name" label="客户名称" />
      <el-table-column prop="amount_real" label="合同金额" />
      <el-table-column prop="num" label="回款期次" />
      <el-table-column prop="return_money" label="回款金额" />
      <el-table-column prop="return_date" label="回款时间" />
      <el-table-column prop="owner_name" label="销售姓名" />
      <el-table-column label="附件" show-overflow-tooltip>
        <template #default="{ row }">
          <div v-if="row.files">
            <div v-for="item in row.files">
              <a :href="item.url" target="_blank" :download="item.name">
                {{ item.name }}
              </a>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 10px; display: flex; justify-content: center">
      <el-pagination
        :small="true"
        v-model:currentPage="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[20, 50, 100, 200]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script setup>
import { useCounterStore } from "@/stores/counter.js";
import {
  receivablesIndexApi,
  receivablesDeleteApi,
  receivablesPlanReadApi,
} from "@/plugins/api/customer/manage/tab6";
import { treePersonApi } from "@/plugins/api/system/user";
const store = useCounterStore();

const route = useRoute();
//
let searchForm = ref({});
function searchFun() {
  currentPage.value = 1;
  getData();
}
function resetFun() {
  currentPage.value = 1;
  searchForm.value = {};
  getData();
}

// 分页
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
const handleSizeChange = (val) => {
  pageSize.value = val;
  getData();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getData();
};
let tableData = ref([]);
let allMoney = ref(0);
function getData() {
  let obj = {
    ...searchForm.value,
    ...{
      page: currentPage.value,
      pageSize: pageSize.value,
    },
  };
  receivablesIndexApi(obj).then((res) => {
    allMoney.value = res.totalAmount;
    tableData.value = res.list;
    total.value = res.page.total;
  });
}
let addPageRef = ref(null);
function addFun() {
  addPageRef.value.initFun();
}
function initFun() {
  tableData.value = [];
  getData();
}
function refreshList() {
  getData();
}
//
let updatePageRef = ref(null);
function updateFun(row) {
  updatePageRef.value.initFun(row);
}
// 删除
function delFun(id) {
  ElMessageBox.confirm("确认删除，是否继续?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      receivablesDeleteApi({
        id: id,
      }).then(() => {
        ElMessage({
          type: "success",
          message: "删除成功！",
        });
        getData();
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消。",
      });
    });
}
//
function detailFun(row) {
  receivablesPlanReadApi({
    id: row.id,
  });
}
// 销售
let userOptions = ref([]);
function getUsers() {
  treePersonApi().then((res) => {
    userOptions.value = res;
  });
}
//
defineExpose({
  initFun,
});
onMounted(() => {
  let date = route.query.date;
  if (date) {
    searchForm.value.start_date = date;
  }
  getData();
  getUsers();
});
</script>

<style lang="scss" scoped>
.custom-tab-page {
  width: 100%;
  height: 100%;
  .search-div {
    white-space: nowrap;
    :deep(.el-form-item) {
      width: calc(100% / 9);
    }
  }
  .tab5-title {
    display: flex;
    height: 46px;
    background: #fafbfc;
    box-sizing: border-box;
    padding-left: 10px;
    justify-content: space-between;

    .left {
      display: flex;
      align-self: center;
    }

    .right {
      align-self: center;
      margin-right: 10px;
    }
  }
}
</style>
